<template>
  <el-dialog
    :width="1600"
    v-model="formVisible"
    title="抽查对象"
    @close="formCancel"
  >
    <div class="tip">
      <img src="@/assets/imgs/spotCheck/tip.png" alt="" />
      智能生成抽查对象的方案会排除近几年已经被抽查过得单位，尽量选择去年未整改到位的单位、活跃程度高的单位
    </div>
    <div class="header">
      <div class="tx">抽查比例</div>
      <div class="input">
        <el-input v-model="num" type="Number" :min="1" :max="100" />
      </div>
      <div class="tx">%抽查比例</div>
      <el-select-v2
        v-model="typeName"
        :options="typeNameOptions"
        placeholder="请选择社会组织分类"
        class="select"
        filterable
        clearable
      />
      <el-button type="primary" style="margin-left: 50px" @click="generate"
        >抽查对象生成</el-button
      >
    </div>
    <div class="content">
      <div class="content-lentgh">
        <div class="content-lentgh-title">共{{ list.length }}家</div>
        <div class="content-lentgh-tab">
          <div
            :class="
              sorgType === undefined
                ? 'content-lentgh-tab-item ac'
                : 'content-lentgh-tab-item'
            "
            @click="setSorgType(undefined)"
          >
            全部
          </div>
          <div
            :class="
              sorgType === 0
                ? 'content-lentgh-tab-item ac'
                : 'content-lentgh-tab-item'
            "
            @click="setSorgType(0)"
          >
            民非
          </div>
          <div
            :class="
              sorgType === 1
                ? 'content-lentgh-tab-item ac'
                : 'content-lentgh-tab-item'
            "
            @click="setSorgType(1)"
          >
            社团
          </div>
        </div>
      </div>
      <div class="grid">
        <div class="grid-item" v-for="(it, index) in list" :key="it.orgId">
          <div class="grid-item-serialNumber">{{ index + 1 }}</div>
          <div class="grid-item-tx">
            {{ it.orgName }}
          </div>
          <div class="grid-item-btns">
            <!--<img-->
            <!--  src="@/assets/imgs/spotCheck/cx.png"-->
            <!--  @click="changeAnotherOne(it, index)"-->
            <!--/>-->
            <!--<img src="@/assets/imgs/spotCheck/edit.png" />-->
            <span class="folkAssembly" v-if="it.sorgType === 0">民非</span>
            <span class="societies" v-if="it.sorgType === 1">社团</span>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div style="display: flex; justify-content: flex-end; width: 100%">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
  <Add ref="AddRef" @reload="reload" />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import {
  changeAnother,
  intelligent,
  intelligentGet,
  intelligentSave
} from '@/api/spotCheck/spotCheck'
import { ElMessage } from 'element-plus'
import Add from './add/add.vue'

const formVisible = ref(false)

const emit = defineEmits(['reload'])

const AddRef = ref()
const openAddRef = (data) => {
  AddRef.value.show(data)
}

const typeName = ref(undefined)

let arr0 = [
  {
    label: '高中教育类',
    value: '高中教育类'
  },
  {
    label: '科学研究类',
    value: '科学研究类'
  },
  {
    label: '民办非企业单位类别',
    value: '民办非企业单位类别'
  },
  {
    label: '其他居民服务类',
    value: '其他居民服务类'
  },
  {
    label: '其他社会工作类',
    value: '其他社会工作类'
  },
  {
    label: '前期教育类',
    value: '前期教育类'
  },
  {
    label: '体育类',
    value: '体育类'
  },
  {
    label: '卫生类',
    value: '卫生类'
  },
  {
    label: '文化类',
    value: '文化类'
  },
  {
    label: '义务教育类',
    value: '义务教育类'
  },
  {
    label: '职业及其从业者组织',
    value: '职业及其从业者组织'
  }
]
let arr1 = [
  {
    label: '联合性',
    value: '联合性'
  },
  {
    label: '行业分类',
    value: '行业分类'
  },
  {
    label: '行业性',
    value: '行业性'
  },
  {
    label: '学术性',
    value: '学术性'
  },
  {
    label: '专业性',
    value: '专业性'
  }
]

const typeNameOptions = ref([...arr0, ...arr1])

const sorgType = ref(undefined)

watch(
  () => sorgType.value,
  (val) => {
    switch (val) {
      case 0:
        typeNameOptions.value = arr0
        break
      case 1:
        typeNameOptions.value = arr1
        break
      default:
        typeNameOptions.value = [...arr0, ...arr1]
    }
    typeName.value = undefined
  }
)

const setSorgType = (type) => {
  sorgType.value = type
  generate()
}

const save = () => {
  formVisible.value = true
}

const formCancel = () => {
  formVisible.value = false
}

const change = (e) => {
  console.log('e', e)
  init()
}

const num = ref('')
const init = () => {
  let data = {
    types: 0,
    sorgType: sorgType.value
  }
  intelligent(data).then((res) => {
    list.value = res.data || []
  })
}
const sorgSpotCheckPlanId = ref('')
const show = (id) => {
  list.value = []
  num.value = ''
  sorgType.value = undefined
  sorgSpotCheckPlanId.value = id
  init()
  formVisible.value = true
}

const list = ref([])
const generate = () => {
  let data = {
    num: num.value / 100,
    types: 0,
    sorgType: sorgType.value,
    typeName: typeName.value
  }
  if (num.value === '') {
    data.num = 1
  }
  intelligentGet(data).then((res) => {
    list.value = res.data || []
  })
}

const changeAnotherOne = (it, index) => {
  let data = {
    orgId: list.value.map((i) => i.orgId)
  }

  changeAnother(data).then((res) => {
    list.value.splice(index, 1, res.data)
  })
}

const resetForm = () => {
  formVisible.value = false
}

const reload = () => {
  emit('reload')
  resetForm()
}

const submitForm = () => {
  if (list.value.length === 0) {
    ElMessage.error('请生成抽查对象')
    return
  }
  let data = {
    other: {
      types: 0
    },
    infos: list.value,
    sorgSpotCheckPlanId: sorgSpotCheckPlanId.value
  }
  console.log('list', list.value)
  openAddRef(data)
  // const loading = ref(true)
  // intelligentSave(data)
  //   .then((res) => {
  //     emit('reload')
  //     resetForm()
  //   })
  //   .finally(() => {
  //     loading.value = false
  //   })
}
defineExpose({ show })
</script>

<style scoped lang="scss">
.btns {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0;
}
.tip {
  width: 100%;
  height: 34px;
  background: #f5f6f8;
  border-radius: 0px 0px 0px 0px;
  display: inline-flex;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  color: #666666;
  margin-bottom: 16px;
  img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-left: 20px;
  }
}
.header {
  display: flex;
  align-items: center;
  padding-bottom: 21px;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom: 10px;
  .tx {
    font-weight: 400;
    font-size: 18px;
    color: #333333;
  }
  .input {
    width: 66px;
    margin: 0 10px 0 20px;
  }
}
.content {
  width: 100%;
  .content-lentgh {
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .content-lentgh-tab {
      display: flex;
      align-items: center;
      .content-lentgh-tab-item {
        font-size: 16px;
        color: #333;
        cursor: pointer;
        margin-right: 30px;
      }
      .ac {
        color: #0071ffa5;
      }
    }
  }
  .grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    .grid-item {
      //width: 400px;
      height: 38px;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #e9e9e9;
      display: flex;
      box-sizing: border-box;
      padding: 0 10px;
      align-items: center;
      overflow: hidden;
      .grid-item-serialNumber {
        width: 22px;
        height: 22px;
        background: #e9e9e9;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
        border-radius: 50%;
      }
      .grid-item-tx {
        flex: 1;
        flex-shrink: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
      }
      .grid-item-btns {
        display: flex;
        padding-left: 10px;
        //width: 68px;
        img {
          width: 19px;
          height: 19px;
          cursor: pointer;
        }
        .folkAssembly {
          background: #ffad00;
          font-size: 13px;
          padding: 5px 10px;
          color: #333;
        }
        .societies {
          background: #c3dfff;
          font-size: 13px;
          padding: 5px 10px;
          color: #333;
        }
      }
    }
  }
}
.select {
  width: 200px;
  margin-left: 40px;
}
</style>
